<!-- CREATE 2022-08-09 -->
<!-- AUTHOR 伊玖OneNine -->

<script setup lang="ts">
import type { MenuOption } from 'naive-ui'
import { HomeOutline, InformationCircleOutline, ListOutline, SearchOutline } from '@vicons/ionicons5'
import { RouterLink } from 'vue-router'

const route = useRoute()

const menuOptions: MenuOption[] = [
  {
    label: () => h(RouterLink, {
      to: {
        path: '/',
      },
    },
    { default: () => '首页' }),
    key: '/',
    icon: renderIcon(HomeOutline),
  },
  {
    label: () => h(RouterLink, {
      to: {
        path: '/infos',
      },
    },
    { default: () => '信息列表' }),
    key: '/infos',
    icon: renderIcon(ListOutline),
  },
  {
    label: () => h(RouterLink, {
      to: {
        path: '/search',
      },
    },
    { default: () => '搜索' }),
    key: '/search',
    icon: renderIcon(SearchOutline),
  },
  {
    label: () => h(RouterLink, {
      to: {
        path: '/about',
      },
    },
    { default: () => '关于' }),
    key: '/about',
    icon: renderIcon(InformationCircleOutline),
  },
]

const show = computed(() => {
  return menuOptions.find((option) => {
    return option.key === route.path
  })?.key
})
</script>

<template>
  <n-layout-sider
    bordered
    show-trigger
    collapse-mode="width"
    :width="240"
    :native-scrollbar="false"
    style="height: 100%"
  >
    <n-menu :options="menuOptions" :default-value="show" />
  </n-layout-sider>
</template>
